<template>
  <div class="caseRate">
    <dt-search ref="search" :label-width="90" :xl="6" :xlBtn="6" @search="onSearch">
      <Button type="primary" v-if="showTab == 2" @click="exportExcel">导出未通过</Button>
    </dt-search>
    <Tabs type="card" v-model="showTab" :animated="false" @on-click="tabClickFun">
      <TabPane :label="`待审核${avatarCount.count1}`" name="1" v-if="unlocking('0204150100')">
        <div class="avaImgBox" v-if="listData.length">
          <div class="avaTop">
            <Checkbox v-model="checkAll" @on-change="handleCheckAll">全选</Checkbox>
            <div>
              <Button type="primary" @click="noPass">不通过</Button>
              <Button type="primary" style="margin-left: 8px" @click="pass">通过</Button>
            </div>
          </div>
          <div>
            <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
              <ul class="avatarBox" ref="avatarBox">
                <li v-for="(item, index) in listData" :key="index">
                  <p>
                    <Checkbox class="checkClass" :label="item.userId">
                      <span>{{ item.userId }}</span>
                    </Checkbox>
                    <em
                      class="avatarImg"
                      @click="viewPoster(item.avatarUrl, index)"
                      v-if="item.avatarUrl"
                      :style="`background-image: url(${item.avatarUrl});`"></em>

                    <em class="avatarImg" v-else>
                      <Icon
                        type="md-contact"
                        size="120"
                        style="margin: -14px 0 0 -12px"
                        class="avatarIcon"
                        color="#95c9fa" />
                    </em>
                  </p>
                  <span>{{ item.userNameAndWorkNo }}</span>
                </li>
              </ul>
            </CheckboxGroup>
            <dt-page v-model="pageOpt" @change="onPageChange" />
          </div>
        </div>
        <div class="noData" v-else>暂无数据</div>
      </TabPane>
      <TabPane :label="`未通过${avatarCount.count2}`" name="2"></TabPane>
      <TabPane :label="`已通过${avatarCount.count3}`" name="3"></TabPane>
      <dt-grid ref="table" v-show="showTab != 1" :page="page" :onFetch="onFetch" />
    </Tabs>
    <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage"></preview-image>
    <dt-loading :loading="loading"></dt-loading>
  </div>
</template>

<script>
  import searchOpt from './opt/search'
  import column from './opt/column'

  import avatarMgr from '@/biz/avatar/avatar'
  // import func from 'vue-temp/vue-editor-bridge'

  export default {
    data() {
      return {
        loading: false,
        showTab: this.unlocking('0204150100') ? '1' : '2',
        statistical: {
          no: '11',
          all: '22',
          yi: '33'
        },
        listData: [],
        checkAll: false,
        indeterminate: true,
        checkAllGroup: [],
        pageOpt: {
          total: 10
        },

        page: {
          total: 0,
          rows: 50,
          current: 1
        },
        paramsAll: {},
        avatarCount: {
          count1: 0,
          count2: 0,
          count3: 0
        },
        preViewImg: [],
        showIndex: 0,
        searchVal: {
          buildingStatus: [1, 2, 3]
        }
      }
    },
    created() {},
    mounted() {
      // this.getList()
      this.$refs.search.init(this.$refs.table, new searchOpt(this), this.searchVal)
      this.$refs.table.init(this, new column(this))
      this.$refs.table.fetch()
    },

    methods: {
      onPageChange() {
        this.$refs.table.fetch()
      },
      viewPoster(img, index) {
        this.preViewImg = [img]
        // this.showIndex = index
        this.$refs.preViewImage.show(true)
      },
      exportExcel() {
        avatarMgr.exportFailedAvatar(this.paramsAll)
      },
      onSearch(val) {
        this.pageOpt.current = 1
        console.log(val, '333')
      },
      tabClickFun() {
        this.$refs.table.fetch()
      },
      lookImg(val) {
        console.log(val, '111')
        this.preViewImg = val
        this.$refs.preViewImage.show(true)
      },
      onFetch(data) {
        this.loading = true
        this.checkAllGroup = []
        let params = {
          ...data,
          page: this.showTab == 1 ? this.pageOpt.current : data.current,
          rows: this.showTab == 1 ? this.pageOpt.rows : data.rows,
          node: Number(this.showTab)
        }
        this.paramsAll = params
        this.selectCount()
        setTimeout(() => {
          this.loading = false
        }, 1500)
        return avatarMgr.selectAll(params).then((res) => {
          this.checkAll = false
          this.page.total = res.total
          this.$set(this.pageOpt, 'total', res.total)

          this.listData = res.list

          this.$refs.table.fixHeight()
          if (this.showTab == 1) {
            this.scrollToTop()
          }

          return res.list
          console.log(res.list, 'bbbb')
        })
      },
      selectCount() {
        avatarMgr.selectCount(this.paramsAll).then((res) => {
          this.avatarCount = res
        })
      },

      handleCheckAll(val) {
        this.checkAllGroup = []
        console.log(this.listData, this.listData.length, '22')
        if (this.checkAll) {
          this.listData.forEach((item) => {
            this.checkAllGroup.push(item.userId)
          })
        } else {
          this.checkAllGroup = []
        }
      },
      checkAllGroupChange() {},
      pass() {
        console.log(this.checkAllGroup, '222')
        if (this.checkAllGroup.length < 1) {
          this.$Message.warning('请先选择头像')
          return false
        }
        this.$Modal.confirm({
          title: '通过',
          content: `共选择${this.checkAllGroup.length}名员工通过，是否确认？`,
          closable: true,
          onOk: () => {
            let params = {
              node: 3,
              userIds: this.checkAllGroup
            }
            avatarMgr.uPAvatarReview(params).then((res) => {
              this.$Message.success('设置完成')
              this.checkAllGroup = []
              this.$refs.table.fetch()
            })
          }
        })
      },
      noPass() {
        console.log(this.checkAllGroup, '222')
        if (this.checkAllGroup.length < 1) {
          this.$Message.warning('请先选择头像')
          return false
        }
        this.$Modal.confirm({
          title: '不通过',
          content: `共选择${this.checkAllGroup.length}名员工不通过，是否确认？`,
          closable: true,
          onOk: () => {
            let params = {
              node: 2,
              userIds: this.checkAllGroup
            }
            avatarMgr.uPAvatarReview(params).then((res) => {
              this.$Message.success('设置完成')
              this.checkAllGroup = []
              this.$refs.table.fetch()
            })
          }
        })
      },
      scrollToTop() {
        this.$refs.avatarBox.scrollTo({
          top: 0,
          behavior: 'smooth' // 使用平滑的滚动效果
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .caseRate {
    padding: 20px;

    .detail_title {
      margin-bottom: 20px;

      .search_btn {
        margin-left: 20px;
      }
    }
    .avaImgBox {
      width: 100%;
      border: 1px #ccc solid;
      padding: 20px;
    }
    .avaTop {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .avatarBox {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      max-height: 55vh;
      overflow-y: scroll;
      margin-top: 10px;

      li {
        width: 20%;
        margin-top: 20px;
        text-align: center;
        .avatarImg {
          width: 100px;
          height: 100px;

          display: inline-block;
          background-size: cover;
          border-radius: 50%;
          vertical-align: -80px;
          cursor: pointer;
          text-align: center;

          .avatarIcon {
            display: block;
            width: 100%;
            height: 100%;
            .ivu-icon-md-contact:before {
              margin-top: -40px;
            }
            // ::before {
            //   margin-top: -40px;
            // }
          }
        }
        span {
          display: block;
          margin-top: 10px;
        }
        .checkClass {
          span {
            display: none;
          }
        }
      }
    }
    .noData {
      text-align: center;
      padding-top: 30px;
      color: #95c9fa;
    }
  }
</style>
